<template>
	<u-popup id="popup-box" v-model="params.show" mode="center" bgColor="transparent" :border-radius="params.radius" :mode="params.mode"  @close="cancel">
		<!-- 成功或失败弹窗 -->
		<template v-if="params.type === 1">
			<view class="popup-box">
				<!-- <template v-if="params.icon === 1">
					<image class="icon-img" style="width:210rpx;" src="/static/popup/popup_success.png" mode="widthFix"></image>
				</template>
				<template v-else-if="params.icon === 2">
					<image class="icon-img" style="width:120rpx;" src="/static/popup/popup_fail.png" mode="widthFix"></image>
				</template>
				<template v-else-if="params.icon === 3">
					<image class="icon-img" style="width:120rpx;" src="/static/popup/popup_info.png" mode="widthFix"></image>
				</template> -->
				<view class="title">
					<text>{{params.title}}</text>
				</view>
				<view class="content">
					<text>{{params.content}}</text>
				</view>
				<view class="btn-box" style="margin-top: 30rpx;">
					<template v-if="params.showCancel">
						<button class="btn btn-two" :style="'border:1rpx solid;color:'+primaryColor+';'" @click="cancel">{{params.cancelText}}</button>
						<button class="btn btn-two" :style="'color:#fff;background:'+primaryColor+';'" @click="confirm">{{params.confirmText}}</button>
					</template>
					<template v-else>
						<button class="btn btn-one" @click="confirm">{{params.confirmText}}</button>
					</template>
				</view>
			</view>
		</template>
		
		<!-- 成功或失败弹窗 -->
		<template v-else-if="params.type === 2">
			<view class="rich-box">
				<!-- <rich-text :nodes="params.content"></rich-text> -->
				<view class="warp">
					<image src="/static/fe7e3aeaffb893b0162c0ddc4e1676e.png" style="width: 527rpx;height: 440rpx;position: absolute;"></image>
					<view style="display: flex;align-items: center;margin-left: 168rpx;">
						<image src="/static/f569ed126f083cb95247655c06afd50.png" style="width: 38rpx;height: 38rpx;margin-top: 59rpx;"></image>
						<view style="font-size: 36rpx;color: #000000;position: relative;margin-left: 5rpx;margin-top: 59rpx;">课程提醒</view>
					</view>
					<view style="width: 346rpx;font-size: 28rpx;color: #232323;position: relative;margin-top: 71rpx;margin-left: 90rpx;">您购买的课程快开始了，请及时查看</view>
					<view class="warp-button" @click="hide">我知道了</view>
				</view>
			</view>
		</template>
		<!-- modal弹窗 -->
		<template v-else-if="params.type === 3">
			<view class="rich-box">
				
				<view class="frame-clock">
					<view class="block-title">睡前提醒</view>
					<view class="block-text">还有1个小时您该睡觉了,听听相关音乐</view>
					<!-- 推荐列表 -->
					<view class="block-content" v-for="(item,index) in queryList.items" :key="index" @click="goMusicDetail(item)">
						<image :src="getUrl(item.ImgUrl)" class="img"></image>
						<view style="margin-left: 19rpx;">
							<view class="block-name">{{item.Name}}</view>
							<view class="block-info">{{item.Intro}}</view>
						</view>
					</view>
				<!-- 	<view class="block-content">
						<image src="/static/photo2.png" class="img"></image>
						<view style="margin-left: 19rpx;">
							<view class="block-name">White noise | waves</view>
							<view class="block-info">XXXXXXX</view>
						</view>
					</view>
					<view class="block-content">
						<image src="/static/photo2.png" class="img"></image>
						<view style="margin-left: 19rpx;">
							<view class="block-name">White noise | waves</view>
							<view class="block-info">XXXXXXX</view>
						</view>
					</view> -->
				</view>
				
			</view>
		</template>
		<!-- modal弹窗 -->
		<!-- <template v-else-if="params.type === 2">
			<view class="modal-box">
				<view class="modal-top">
					<text class="modal-title">{{params.title}}</text>
					<text class="modal-content">{{params.content}}</text>
				</view>
				<view class="modal-btn">
					<template v-if="params.showCancel">
						<view class="item" @click="cancel">{{params.cancelText}}</view>
						<u-line direction="col" color="#eee" />
						<view class="item active" @click="confirm">{{params.confirmText}}</view>
					</template>
					<template v-else>
						<view class="item active" style="width: 500rpx;" @click="confirm">{{params.confirmText}}</view>
					</template>
				</view>
			</view>
		</template> -->
		<!-- 自定义弹窗 -->
		<!-- <template v-else-if="params.type === 3">
			<view class="rich-box">
				<rich-text :nodes="params.content"></rich-text>
			</view>
		</template> -->
		<!-- <template>
			<view class="popup-box">
				<template>
				<view class="center-box">
				  <image class="logo" src="/static/invite-logo.png"></image>
				  <image class="close" src="/static/close.png" @click.stop="close"></image>
				  <view class="title">邀请函</view>
				  <view class="content">您好！您的朋友xxx邀请您对<text>“为什么小朋友到了一定年龄需要打疫苗？”</text>进行专家答疑，您是否接受？</view>
				  <view class="btn-group">
				    <view class="invite-specia" @click.stop="close">邀请专家</view>
				  </view>
				</view> 
				</template>
			</view>
		</template> -->
	</u-popup>
</template>

<script>
	import commonUtil from'@/common/commonUtil.js';
	export default {
		name:"test",
		data() {
			return {
				primaryColor: '#1890FF',
				// #ifdef APP-PLUS
				eventChannel:null,
				// #endif
				params:{
					type: 2,
					showCancel: false, 
					confirmText:'确定', 
					cancelText:'取消', 
					closeOpacity:false,
					title: '测试', 
					content: '测试文本' ,
					icon: 1,
					show: true,
					radius:0,
					mode:'center'
				},
				//推荐音乐
				queryList: {
					items: [],
					total: 0,
				},
			}
		},
		mixins:[commonUtil],
		created(){
			// console.log('我被创建了')
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
			this.params = uni.getStorageSync('globalPopup');
			
			if('musicId' in this.params){
				console.log('我是闹钟提醒')
				this.warnMusic()
				this.getList()
			}
			console.log('params',this.params)
		},
		methods:{
			cancel(){
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta:1,
					success() {
						_this.eventChannel.emit('cancel');
					}
				})
				// #endif
				this.hide()
				
				// #ifndef APP-PLUS
				//执行回调
				this.params.cancel && this.params.cancel(); 
				// #endif

			},
			confirm(){
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta:1,
					success() {
						_this.eventChannel.emit('confirm');
					}
				})
				// #endif
				this.hide();
				// #ifndef APP-PLUS
				//执行回调
				this.params.confirm && this.params.confirm(); 
				// #endif
			},
			// 弹窗关闭后需要重置popupConfig数据
			hide(){
				let _this = this;
				// console.log('我被点击了')
				// 关闭弹窗
				// this.$store.dispatch('updatePopupConfig',{show:false})
				setTimeout(()=>{
					const config = {
						type: 2, 
						showCancel: false, 
						confirmText:'确定', 
						cancelText:'取消', 
						closeOpacity:false,
						title: '', 
						content: '' ,
						icon: 1,
						show: false
					}
					
					// _this.params = config
					this.params.show = false
					console.log('我被点击了',this.params)
					// this.$set(_this.params,'show',false)
					// _this.$store.dispatch('updatePopupConfig',config)
				},100)// 这里时间就是弹窗显示隐藏动画时间
			},
			
			// 播放闹钟提醒音乐
			async warnMusic(){
				
				let data = {
					queryId:this.params.musicId
				}
				var res = await this.getdatas(data, '/api/Music/MusicInfo')
				console.log('音乐详情',res)
			},
			
			// 闹钟推荐音乐
			async getList() {
				//推荐音乐
				this.queryList.items = []
				var query = {
					"page": 1,
					"limit": 3,
					"queryName": "",
					queryType: 1,
					orderBy: 9
				}
				var res = await this.getdatas(query, '/api/Music/MusicList');
				if (res.code == 200) {
					this.queryList.total = res.data.total
					this.queryList.items = res.data.items
				}
			},
			
			// 前往播放音乐
			goMusicDetail(item){
				this.hide()
				this.gomusic2(item)
				
			},
			
			gomusic2(music) {
				var url = '/pages4/bofangye/bofangye?type=tianjia&id=' + music.Id
				if (music.MusicType > 0) url = '/pages4/bofangye/bofangye_shipin?id=' + music.Id
				this.go(url)
			},
		},
		computed: {
			
			// params() {
			// 	// type:1,
				
			// 	let data = {
			// 		type: 2,
			// 		showCancel: false, 
			// 		confirmText:'确定', 
			// 		cancelText:'取消', 
			// 		closeOpacity:false,
			// 		title: '测试', 
			// 		content: '测试文本' ,
			// 		icon: 1,
			// 		show: true
			// 	}
			// 	console.log(data,'我进来了，我是弹窗页面')
			// 	return {
			// 		type: 2,
			// 		showCancel: false, 
			// 		confirmText:'确定', 
			// 		cancelText:'取消', 
			// 		closeOpacity:false,
			// 		title: '测试', 
			// 		content: '测试文本' ,
			// 		icon: 1,
			// 		show: true
			// 	}
			// }
		}
	}
</script>

<style>
	page>view{
		background: transparent !important;
		/* background-color:rgba(255,255,255,0) !important; */
		/* opacity:0.93; */
		/* border-radius: 50rpx; */
	}
</style>

<style lang="scss" scoped>

 .center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 622rpx;
    padding: 32rpx;
    border-radius: 16rpx;
    opacity: 1;
    background: rgba(255,255,255,1);
 
    .logo {
      position: absolute;
      top: -48rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 136rpx;
      height: 144rpx;
    }
    .close {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      width: 48rpx;
      height: 48rpx;
    }
    
    .title {
      margin-top: 66rpx;
      text-align: center;
      color: rgba(0,0,0,1);
      font-size: 36rpx;
      font-weight: 500;
      font-family: "PingFang SC";
      letter-spacing: 0.6rpx;
    }
 
    .content {
      margin: 40rpx 0;
      font-size: 26rpx;
      font-family: "PingFang SC";
      letter-spacing: 0.6rpx;
      color: #343434;
      text {
        font-size: 32rpx;
        letter-spacing: 0.6rpx;
        color: rgba(69,108,255,1);
      }
    }
 
    .btn-group {
      display: flex;
      justify-content: center;
      padding: 0 16rpx;
      .invite-specia {
        width: 526rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 16rpx;
        text-align: center;
        background: linear-gradient(-46.8deg, rgba(63,101,255,1) 0%, rgba(97,141,255,1) 100%);
        color: #fff;
      }
    }
  }
	.popup-box{
		width:420rpx;
		min-height:400rpx;
		display:flex;
		flex-direction: column;
		align-items:center;
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		.title{
			font-size: 40rpx;
			font-weight:600;
			margin-top: 26rpx;
		}
		.content{
			font-size: 30rpx;
			margin: 20rpx 0;
			text-align: center;
		}
		.btn-box,.btn{
			display: flex;
			justify-content: center;
			align-items:center;
			.btn-one{
				width:300rpx;
				height:76rpx;
				background: $uni-color-primary;
				color:#fff;
				border-radius: 38rpx;
			}
			.btn-two{
				width:206rpx;
				height:76rpx;
				border-radius: 38rpx;
				margin: 0 20rpx;
				background:#fff;
			}
		}
	}
	.modal-box{
		display:flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		.modal-top{
			width:420rpx;
			padding: 40rpx;
			display:flex;
			flex-direction: column;
			align-items:center;
			.modal-title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.modal-content{
				font-size: 30rpx;
				margin-top: 20rpx;
				text-align: center;
				color: #333333;
			}
		}
		.modal-btn{
			border-top: 1rpx solid #eee;
			display: flex;
			.item{
				font-size: 32rpx;
				width: 250rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color:#666666;
				font-weight: 600;
			}
			.active{
				color:$uni-color-primary;
			}
		}
	}
	.rich-box{
		max-width: 750rpx;
		// height: 457rpx;
		// height: 100%;
		overflow: hidden;
		background: transparent;
		background-color:rgba(255,255,0,0) ;
		// border-radius: 50rpx !important;
	}
	
	.warp{
		width: 527rpx;
		height: 440rpx;
		// margin-top: 0rpx;
		background: transparent;
		background-color:rgba(255,255,0,0);
		// border-radius: 50rpx !important;
		// background-color: #FFFFFF;
		.warp-content{
			position: relative;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			width: 462rpx;
			// height: 78rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			background: linear-gradient(to bottom,#E9F3FF, #C8F1FF);;
			border-radius: 15rpx;
			margin-left: 32rpx;
			margin-top: 198rpx;
		}
		.warp-button{
			margin-left: 60rpx;
			margin-top: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 88rpx;
			background: #008FD7;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
			font-weight: normal;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 43rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			position: relative;
		}
	}
	
	// 闹钟样式
	.frame-clock{
		width: 750rpx;
		// height: 872rpx;
		background: #003460;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		padding: 46rpx 32rpx;
		.block-title{
			// margin-top: 46rpx;
			margin-left: 278rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 24rpx;
		}
		.block-text{
			margin-top: 40rpx;
			// margin-left: 32rpx;
			height: 37rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #8FE4FF;
			line-height: 24rpx;
		}
		.block-content{
			display: flex;
			margin-top: 51rpx;
		}
		.img{
			width: 152rpx;
			height: 152rpx;
			border-radius: 32rpx;
		}
		.block-name{
			margin-top:30rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 49rpx;
		}
		.block-info{
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 23rpx;
			color: #959595;
			line-height: 31rpx;
		}
	}
</style>